<template>
  <view class="teacher-list-page">
    <!-- 搜索栏 -->
    <view class="search-section">
      <view class="search-bar-container">
        <text class="iconfont-v2 icon-sousuo search-icon"></text>
        <input 
          class="search-input" 
          placeholder="请输入关键字" 
          v-model="searchKeyword" 
          @confirm="handleSearch" 
        />
        <button class="search-btn" @click="handleSearch">
          <text>搜索</text>
        </button>
      </view>
    </view>

    <!-- 教师统计 -->
    <view class="teacher-stats">
      <text class="stats-text">共 {{ totalTeachers }} 名老师</text>
    </view>

    <!-- 教师列表 -->
    <view class="teacher-list">
      <view class="teacher-card" v-for="(teacher, index) in teacherList" :key="index" @click="goTeacherDetail(teacher)">
        <view class="course-thumbnail">
          <image :src="teacher.thumbnail" :alt="teacher.courseTitle" />
          <view class="thumbnail-overlay">
            <text class="course-title">{{ teacher.courseTitle }}</text>
          </view>
        </view>
        <view class="teacher-info">
          <text class="teacher-name">{{ teacher.name }}</text>
          <text class="teacher-specialty">{{ teacher.specialty }}</text>
          <text class="enrollment-count">已报名 {{ teacher.enrollment }}人</text>
          <button class="enroll-btn" @click.stop="enrollCourse(teacher)">
            <text>立即报名</text>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: "",
      totalTeachers: 169,
      
      // 教师列表数据
      teacherList: [
        {
          id: 1,
          name: "李老师",
          specialty: "英语教学专家",
          courseTitle: "英语四级强化训练",
          thumbnail: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          enrollment: 1250
        },
        {
          id: 2,
          name: "王老师",
          specialty: "数学教学专家",
          courseTitle: "数学基础强化",
          thumbnail: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          enrollment: 980
        },
        {
          id: 3,
          name: "张老师",
          specialty: "考研英语专家",
          courseTitle: "考研英语冲刺",
          thumbnail: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          enrollment: 2100
        },
        {
          id: 4,
          name: "刘老师",
          specialty: "计算机教学专家",
          courseTitle: "计算机基础入门",
          thumbnail: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          enrollment: 650
        },
        {
          id: 5,
          name: "陈老师",
          specialty: "物理教学专家",
          courseTitle: "物理实验指导",
          thumbnail: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          enrollment: 420
        },
        {
          id: 6,
          name: "赵老师",
          specialty: "化学教学专家",
          courseTitle: "化学方程式解析",
          thumbnail: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          enrollment: 380
        }
      ]
    }
  },
  methods: {
    handleSearch() {
      if (this.searchKeyword.trim()) {
        console.log("搜索老师:", this.searchKeyword);
        uni.showToast({
          title: `搜索: ${this.searchKeyword}`,
          icon: 'none'
        });
      } else {
        uni.showToast({
          title: "请输入搜索关键字",
          icon: 'none'
        });
      }
    },
    goTeacherDetail(teacher) {
      console.log("查看老师详情:", teacher);
      uni.navigateTo({
        url: `/pages/fast/teacher-detail?id=${teacher.id}`
      });
    },
    enrollCourse(teacher) {
      console.log("报名课程:", teacher);
      uni.showModal({
        title: "确认报名",
        content: `确定要报名《${teacher.courseTitle}》吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: "报名成功",
              icon: 'success'
            });
          }
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.teacher-list-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.search-section {
  background: white;
  padding: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

  .search-bar-container {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 50rpx;
    padding: 20rpx 30rpx;
    gap: 20rpx;

    .search-icon {
      font-size: 32rpx;
      color: #999;
    }

    .search-input {
      flex: 1;
      border: none;
      outline: none;
      background: transparent;
      font-size: 28rpx;
      color: #333;

      &::placeholder {
        color: #999;
      }
    }

    .search-btn {
      background: #ED6567;
      color: white;
      border: none;
      border-radius: 40rpx;
      padding: 16rpx 32rpx;
      font-size: 28rpx;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background: #d55a54;
      }

      text {
        color: white;
      }
    }
  }
}

.teacher-stats {
  background: white;
  padding: 20rpx 40rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

  .stats-text {
    font-size: 28rpx;
    color: #666;
  }
}

.teacher-list {
  padding: 0 20rpx;

  .teacher-card {
    background: white;
    border-radius: 24rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-4rpx);
      box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
    }

    .course-thumbnail {
      position: relative;
      width: 100%;
      height: 200rpx;

      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .thumbnail-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
        padding: 40rpx 30rpx 20rpx;

        .course-title {
          font-size: 28rpx;
          font-weight: 600;
          color: white;
          line-height: 1.3;
        }
      }
    }

    .teacher-info {
      padding: 30rpx;

      .teacher-name {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 8rpx;
        display: block;
      }

      .teacher-specialty {
        font-size: 26rpx;
        color: #666;
        margin-bottom: 12rpx;
        display: block;
      }

      .enrollment-count {
        font-size: 24rpx;
        color: #999;
        margin-bottom: 20rpx;
        display: block;
      }

      .enroll-btn {
        width: 100%;
        background: #ED6567;
        color: white;
        border: none;
        border-radius: 50rpx;
        padding: 20rpx;
        font-size: 28rpx;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          background: #d55a54;
        }

        text {
          color: white;
        }
      }
    }
  }
}
</style>